<template>
    <el-container>
      <el-header>
        <!-- 优化的头部布局 -->
         <el-row :gutter="20" style="height: 100%; align-items: center;">
    <el-col :span="8">
      <div class="header-left">
        <el-icon class="header-icon"><Grid /></el-icon>
        <span class="system-title">
          溯源管理系统
        </span>
      </div>
    </el-col>
    <el-col :span="16">
      <div class="header-right">
        <div class="user-info">
          <el-icon class="user-avatar"><Avatar /></el-icon>
          <div class="user-details">
            <div class="user-name">{{ counter.userInfo.userName || '未登录' }}</div>
            <div class="user-role">{{ counter.userInfo.roleName || '普通用户' }}</div>
          </div>
        </div>
        <div class="header-actions">
          <el-button 
            type="danger" 
            size="small" 
            @click="quit"
            class="logout-btn"
            :icon="CircleCloseFilled"
          >
            退出登录
          </el-button>
        </div>
      </div>
    </el-col>
  </el-row>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu
        :default-active="route.path"
        class="el-menu-vertical-demo"
        router
      >
        <el-sub-menu index="1">
          <template #title>
            <el-icon><Platform /></el-icon>
            <span>系统保留</span>
          </template>
          <el-menu-item index="/home" >
          <el-icon><Promotion /></el-icon>
          <span>Home</span>
        </el-menu-item>
         <el-menu-item index="/about" >
          <el-icon><StarFilled /></el-icon>
          <span>About</span>
        </el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2">
          <template #title>
            <el-icon><User /></el-icon>
            <span style="font-weight:bold;">授权中心</span>
          </template>
          <el-menu-item v-for="item in counter.userInfo.permissions" :index="item.permissionUrl" >
          <el-icon><Management /></el-icon>
          <span>{{ item.permissionName }}</span>
        </el-menu-item>
          <!-- <el-menu-item index="/userlist" >
          <el-icon><HelpFilled /></el-icon>
          <span>用户管理</span>
        </el-menu-item>
          <el-menu-item index="/userlist2" >
          <el-icon><UserFilled /></el-icon>
          <span>用户管理--配置菜单</span>
        </el-menu-item>
         <el-menu-item index="/rolelist" >
          <el-icon><Checked /></el-icon>
          <span>角色管理</span>
        </el-menu-item> -->
         
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>
            <el-icon><Search /></el-icon>
            <span style="font-weight:bold;">溯源管理</span>
          </template>
          <el-menu-item index="/Basiclist" >
          <el-icon><Goods /></el-icon>
          <span>基本信息</span>
        </el-menu-item>
          <!-- <el-menu-item index="/traceability" >
          <el-icon><List /></el-icon>
          <span>溯源信息</span>
        </el-menu-item>
          <el-menu-item index="/traceability-analysis" >
          <el-icon><DataAnalysis /></el-icon>
          <span>溯源分析</span>
        </el-menu-item> -->
        </el-sub-menu>
        

      </el-menu>

        </el-aside>
        <el-main>
         <RouterView></RouterView>
        </el-main>
      </el-container>
    </el-container>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { useRouter,RouterView,useRoute } from 'vue-router'
import { ElMessage, type FormInstance, type FormRules,ElMessageBox } from 'element-plus'
import axios from 'axios'
const router = useRouter()
const route=useRoute()
import {
  Grid,
  Avatar,
  SwitchButton,
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  Promotion,
  StarFilled,
  LocationFilled,
  Opportunity,
  HelpFilled,
  Platform,
  User,
  UserFilled,
  Management,
  Download,
  Checked,
  MoreFilled,
  Flag,
  Search,
  Goods,
  List,
  DataAnalysis,
  CircleCloseFilled
} from '@element-plus/icons-vue'

//引入pinia
import { useCounterStore } from "@/stores/counter"
//pinia变量
const counter=useCounterStore()

//退出登录
const quit = () => {
    //友好提示
     ElMessageBox.confirm(
    '确定退出登录吗?',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'error',
    }
  )
    .then(() => {
      //点击确定
      //清楚信息
      counter.userInfo.userId = 0;
      counter.userInfo.userName = "";
      counter.userInfo.userNickname = "";
      counter.userInfo.roleName = "";
      counter.userInfo.roleId = 0;
      counter.userInfo.permissions = [];
      //跳转至 登录
       router.push('/')
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '退出已取消!',
      })
    })
}

</script>

<style>
  /* .el-header{
    background-color: rgb(186, 222, 241);
    height: 50px;
    line-height: 50px;
     前景颜色
    color: #1393e3;
  } */
   .el-header{
    /* 柔和的食品溯源主题渐变色 */
    background: linear-gradient(135deg, #2d5a27 0%, #4a7c59 30%, #6b8e23 60%, #8fbc8f 100%);
    height: 60px;
    line-height: 60px;
    /* 调整文字颜色以适应渐变背景，增强可读性 */
    color: #ffffff;
    /* 添加轻微阴影增强层次感 */
    box-shadow: 0 2px 12px rgba(45, 90, 39, 0.15);
    /* 添加顶部装饰条 */
    position: relative;
    /* 固定头部，确保始终可见 */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    width: 100%;
    /* 优化用户信息显示 */
    padding: 0 20px;
  }
  
  .el-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, 
      #8B0000 0%, 
      #DC143C 25%, 
      #FF4500 50%, 
      #FF6347 75%, 
      #FFA07A 100%);
  }
  .el-aside{
    /* 柔和的食品溯源主题侧边栏背景 */
    background: linear-gradient(180deg, 
      rgba(45, 90, 39, 0.03) 0%, 
      rgba(76, 124, 89, 0.06) 50%, 
      rgba(107, 142, 35, 0.03) 100%);
    /* 固定侧边栏，适应页面高度 */
    position: fixed;
    top: 60px;
    left: 0;
    bottom: 0;
    width: 220px;
    height: calc(100vh - 60px);
    overflow-y: auto;
    border-right: 1px solid rgba(76, 124, 89, 0.15);
    box-shadow: 2px 0 12px rgba(45, 90, 39, 0.08);
    z-index: 999;
  }
  
  .el-menu {
    border-right: none;
    background: transparent;
    /* 食品溯源主题菜单样式 */
  }
  
  /* 菜单项样式 */
  .el-menu-item {
    color: #2d5a27;
    font-weight: 500;
    transition: all 0.3s ease;
    margin: 2px 8px;
    border-radius: 8px;
  }
  
  .el-menu-item:hover {
    background: linear-gradient(135deg, 
      rgba(45, 90, 39, 0.1) 0%, 
      rgba(76, 124, 89, 0.15) 100%);
    color: #1e3d1a;
    transform: translateX(2px);
  }
  
  .el-menu-item.is-active {
    background: linear-gradient(135deg, 
      #2d5a27 0%, 
      #4a7c59 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(45, 90, 39, 0.3);
  }
  
  /* 子菜单样式 */
  .el-sub-menu .el-sub-menu__title {
    color: #2d5a27;
    font-weight: 600;
    transition: all 0.3s ease;
    margin: 2px 8px;
    border-radius: 8px;
  }
  
  .el-sub-menu .el-sub-menu__title:hover {
    background: linear-gradient(135deg, 
      rgba(45, 90, 39, 0.1) 0%, 
      rgba(76, 124, 89, 0.15) 100%);
    color: #1e3d1a;
    transform: translateX(2px);
  }
  
  .el-sub-menu.is-opened .el-sub-menu__title {
    background: linear-gradient(135deg, 
      rgba(45, 90, 39, 0.08) 0%, 
      rgba(76, 124, 89, 0.12) 100%);
    color: #1e3d1a;
  }
  
  /* 子菜单项样式 */
  .el-sub-menu .el-menu-item {
    padding-left: 50px !important;
    margin: 1px 8px;
  }
  
  /* 图标样式 */
  .el-menu .el-icon {
    color: #4a7c59;
    margin-right: 8px;
  }
  
  .el-menu-item.is-active .el-icon {
    color: #ffffff;
  }
  
  .el-sub-menu .el-sub-menu__title .el-icon {
    color: #4a7c59;
  }
  
  /* 主内容区域样式调整 */
  .el-main {
    margin-left: 220px;
    margin-top: 60px;
    padding: 24px;
    min-height: calc(100vh - 60px);
    background: #f8f9fa;
  }
  
  /* 确保容器布局正确 */
  .el-container {
    min-height: 100vh;
  }
  
  /* 头部左侧样式 */
  .header-left {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  
  .header-icon {
    font-size: 24px;
    color: #ffffff;
    opacity: 0.9;
  }
  
  .system-title {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 1px;
  }
  
  /* 头部右侧样式 */
  .header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    height: 100%;
  }
  
  .user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
  }
  
  .user-info:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
  }
  
  .user-avatar {
    font-size: 20px;
    color: #ffffff;
    opacity: 0.9;
  }
  
  .user-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  
  .user-name {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.2;
  }
  
  .user-role {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.2;
  }
  
  .header-actions {
    display: flex;
    align-items: center;
  }
  
  .logout-btn {
    height: 32px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
  }
  
  .logout-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
  
  .logout-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }
</style>
